Rodrigo

Hi I'm on my phone now so I can't check your demo, but based on the description this sounds more like a CSS issue. Have you tried your layout without Scrolltrigger? Basically the issue could be that there's no enough scrolling space available to trigger the animation and having the markers kind of fixes that. Another option could be that you have your Scrolltrigger instances created in a different order than they appear in the screen. Maybe try to check when all the images are loaded before creating the Scrolltrigger instances or refresh them afterwards. Also you can check if the sort() method helps: https://gsap.com/docs/v3/Plugins/ScrollTrigger/static.sort() Sorry I can't be of more assistance Happy Tweening!

Hi The onInterrupt callback is triggered when you kill an instance https://gsap.com/docs/v3/GSAP/Timeline/kill() In this case you're just adding new instances to the same timeline. Based on the description you have maybe a better approach could be to store the timeline in a variable and if you press another key reverse the timeline and then create a new timeline when the reverse is completed. Another option could be to kill the timeline, create a new animation that moves the note to it's original position and at the same time create the timeline again for the new note so both animations happen at the same time but at different speeds. Lots of options as you can see. If you need more help please create a minimal demo that clearly illustrates what you're trying to achieve. Happy Tweening!

Sorry but without a minimal demo that clearly illustrates the issue you're having there is not a lot we can do. My previous post sums all the alternatives I can think of by debugging blindly 🤷‍♂️ Happy Tweening

Hi @Ttanaka_720 and welcome to the GSAP Forums! This demo shows how to create route transitions in React using GSAP and our useGSAP hook: https://stackblitz.com/edit/react-6rzfpp As a recommendation, if you're just getting started I'd recommend you to start for something simpler and smaller, and then move up to route transitions. I'd recommend you to begin here: https://gsap.com/resources/React And check our Stackblitz starter templates as well: https://stackblitz.com/@GSAP-dev/collections/gsap-react-starters Hopefully this helps. Happy Tweening!

I only experienced that when exporting, not when copying the values of the paths, these were full-page artwork that needed to be in the final site so copy/pasting paths wasn't going to cut it. That meant that I was also exporting, masks, gradients and other defs on each artwork, which caused the name collision I mentioned before. I just took what the designer made and ported it to HTML, nothing more, but some odd behaviour in some masks and gradients caught my attention and discovered that using the same name for a mask in different paths, that were on different SVG tags was creating an issue. Happy Tweening!

Hi, In my experience porting SVG from figma to HTML I've seen that there could be some naming collisions between masks and clip-paths. Figma will just give a specific name based on the layer or something like that (can't remember how the figma naming convention works internally TBH), but you could have the same name in two elements and that could affect more than one path, even if those paths are in different SVG tags, so check any mask, path, gradients or anything in a <defs> tag, that could have a specific name that collides with another SVG export from figma. Hopefully this helps Happy Tweening!

Hi, That most likely has to do with devices momentum scrolling and pinning. Long story short scrolling and JS are in different threads in browsers, so it takes some time in devices to get both up-to-date. What you can try is use normalizeScroll only in devices: https://gsap.com/docs/v3/Plugins/ScrollTrigger/static.normalizeScroll() You can combine it with the isTouch property in order to use it only on devices: https://gsap.com/docs/v3/Plugins/ScrollTrigger/static.isTouch Something like this: if (ScrollTrigger.isTouch === 1) { ScrollTrigger.normalizeScroll(true); } Also you can have a look at the anticipatePin property: https://gsap.com/docs/v3/Plugins/ScrollTrigger/?page=1#anticipatePin Hopefully this helps. Happy Tweening!

Hi, Here is a Next demo that has horizontal scrolling so you can have a look at how it works: https://stackblitz.com/edit/stackblitz-starters-zsu4zc?file=app%2Fpage.tsx Hopefully this helps. Happy Tweening!

Hi @Silvia Ortega, Just add once: true and that should do it: line, { scaleY: 0 }, { scaleY: 1, ease: "none", scrollTrigger: { trigger: lineWrapper, start: 0, end: () => "+=" + lineWrapper[0].offsetHeight, markers: true, scrub: true, once: true } } ); https://gsap.com/docs/v3/Plugins/ScrollTrigger/?page=1#once Hopefully this helps. Happy Tweening!

Ah OK, I se what's the idea now. Just use Scrolltrigger normalizeScroll method: https://gsap.com/docs/v3/Plugins/ScrollTrigger/static.normalizeScroll() That would do what you want without adding funky styles to the body tag. You might want to use it in combination with the isTouch property in order to use it only on devices https://gsap.com/docs/v3/Plugins/ScrollTrigger/static.isTouch Hopefully this helps Happy Tweening!

It does, actually after some scroll/pointer events the normal scroll resumes. I'm not sure what you're expecting to happen here. Honestly I think you should start as simple as possible, that's why I suggested to combine the two demos I posted before. Create a single Observer instance then after that is completed, get the normal scrolling going and then using the logic of the second demo start a second Observer instance. I'll check that demo on my devices tomorrow and see what happens. I insist in starting as simple as possible and then start adding complexity to this. Happy Tweening!

Just put the image with a position absolute in the same container above the video element and tween the opacity of the image, as simple as that. Hopefully this helps Happy Tweening!

HI, Maybe something like this: https://codepen.io/GreenSock/pen/WNBzpRY Hopefully this helps. Happy Tweening!

Hi @Europolis! Thanks for sharing your fantastic work with the community! 🥳 I have no experience with the banner world so I can't really offer you any feedback, but I want to thank you again for your hard work! 💚

Hi @tniou and welcome to the GSAP Forums! There are many ways to achieve that, you can check our ScrollTrigger demos collection: https://codepen.io/collection/AEbkkJ Here you can see a couple of demos: https://codepen.io/GreenSock/pen/ZEpNLZa https://codepen.io/GreenSock/pen/xxEQNBB Also this is related to the CSS styles and HTML layout you have in place, a different approach would be needed in order to make this work, for example something like this: https://codepen.io/GreenSock/pen/MWzeJow Hopefully this help Happy Tweening!